<% json_data = notification.json_data %>
<div class="crayons-card notification notification--promoted grid gap-4">
    <header class="mb-2 m:mb-4">
      <h3 class="fw-normal fs-l s:fs-xl m:fs-2xl">
      <%= t("views.notifications.badge.heading_html", badge: tag.strong(sanitize(json_data["badge_achievement"]["badge"]["title"]), class: "fw-bold")) %>
      </h3>
      <% if json_data["badge_achievement"]["badge"]["description"] %>
        <p class="fs-l"><%= json_data["badge_achievement"]["badge"]["description"] %></p>
      <% end %>
    </header>

    <div class="crayons-card crayons-card--secondary p-4 w-100 grid gap-2">
      <img class="w-100 max-w-50 l:max-w-25 h-auto inline-block mx-auto" src="<%= optimized_image_url(json_data["badge_achievement"]["badge"]["badge_image_url"], width: 250) %>" alt="<%= json_data["badge_achievement"]["badge"]["title"] %>">
      <p class="color-base-70"><em><%= json_data["badge_achievement"]["rewarding_context_message"].to_s.html_safe %></em></p>
    </div>

  <p class="self-stretch"><a href="<%= json_data["user"]["path"] %>" class="crayons-btn w-100 m:w-50"><%= t("views.notifications.badge.profile") %></a></p>

  <% credits_awarded = json_data["badge_achievement"]["badge"]["credits_awarded"] %>
  <% if credits_awarded.to_i > 0 %>
    <p class="max-w-75 mx-auto">
      You also received <%= link_to("#{credits_awarded} new credits", "/credits", class: "crayons-link crayons-link--brand fw-bold") %>. 🎉
    </p>
  <% end %>
</div>
